<template>
	<view>
		<view class="con">
			<view class="" style="padding: 0 29rpx;">
				<u-search placeholder="请输入搜索内容" height='73rpx' placeholderColor='#A09E9E' :showAction='false'
					v-model="keyword"></u-search>
			</view>
			<u-tabs :list="list1" itemStyle='height:80rpx' @click="click" lineColor='#FF7428'
				activeStyle='color:#181818;font-size:30rpx;font-weight:bold' lineHeight='12rpx' lineWidth='32rpx'
				inactiveStyle='color:#333333;font-size:30rpx' :scrollable='false'></u-tabs>
			<scroll-view scroll-y="true" class="scrollview" @scrolltolower="scrolltolower">
				<view class="scrollviewbox">
					<view class="proitem" v-for="(item,index) in prolist" :key="index">
						<view class="item_top flex">
							<image class="pro_pic" :src="item.img" mode=""></image>
							<view class="top_right flex">
								<view class="pro_name">
									{{item.name}}
								</view>
								<view class="pro_kc">
									库存{{item.num}}件
								</view>
								<view class="por_price">
									<text v-if="item.type==1">￥</text>
									<image v-if="item.type==2" style="width: 22rpx;height: 22rpx;" src="/static/img/proitem/tz.png" mode=""></image>
									<image v-if="item.type==3" style="width: 22rpx;height: 22rpx;" src="/static/img/proitem/jf.png" mode=""></image>
									<text style="font-size: 36rpx;">{{item.price}}</text>
								</view>
							</view>
						</view>
						<view class="caoz flex">
							<view class="btn" v-if="status==2" @click="sale(1,item.id)">
								下架
							</view>
							<view class="btn" v-if="status!=2" @click="deleteProducts(item.id)">
								删除
							</view>
							<view class="btn" v-if="status==1||status==3" @click="sale(0,item.id,item.num)">
								上架
							</view>
							<view class="btn" @click="clickto('/pages/product/release', { id: item.id })">
								编辑
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="loadmorestatus" @loadmore="scrolltolower" />
			</scroll-view>
		</view>
		<image @click="clickto('/pages/business/checktype')" class="release" src="/pages/business/static/release.png"
			mode=""></image>
			
		<!-- 库存弹框 -->
		<!-- <u-popup :show="show" @close="show=false" :closeOnClickOverlay='false' round='30rpx' mode="center">
			<view class="pop_box">
				<view class="pop_title">
					<image class="titlebg" src="/pages/business/static/titlebg.png" mode=""></image>
					库存信息
				</view>
				<view class="box_con">
					<div class="popitem">
						数量：<input type="number" placeholder="请输入库存数量" v-model="num">
					</div>
				</view>
				<view class="popfooter flex">
					<view class="popbtn" @click="show=false">
						取消
					</view>
					<view class="popbtn popbtn1" @click="edit">
						确认
					</view>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import {
		getProductByStore,
		deleteProduct,
		sxj,
		editProduct
	} from '@/api/product.js'
	export default {
		data() {
			return {
				keyword: '',
				show:false,
				list1: [{
					name: '待审核',
					status: 0
				}, {
					name: '在售中',
					status: 2
				}, {
					name: '已售罄',
					status: 3
				}, {
					name: '已下架',
					status: 1
				}],
				prolist: [],
				status: 0,
				num:0,
				id:null,
				page: 1,
				last_page: 1,
				loadmorestatus: 'loadmore',
			};
		},
		methods: {
			// 修改库存
			edit(){
				if(!this.num){
					uni.showToast({
						title:'请输入库存',
						icon:'none'
					})
					return
				}
				editProduct({id:this.id,num:this.num}).then(res=>{
					if(res.data.code==1){
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
						this.page=1
						this.prolist=[]
						this.getProductByStores()
						this.show=false
						
					}
				})
			},
			// 上下架
			sale(status, id,s) {
				// console.log(s)
				// 判断是否售罄
				if(status==0){
					// console.log(s)
					if(s==0){//卖完了，要上架
						this.clickto('/pages/product/release', { id })
						return
					}
					sxj({
						id,
						status
					}).then(res => {
						// console.log(res)
						if (res.data.code == 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
							})
							setTimeout(() => {
								this.page=1
								this.prolist=[]
								this.getProductByStores()
							}, 1000)
							// this.click(status)
					
						}
					})
					return
				}
				sxj({
					id,
					status
				}).then(res => {
					// console.log(res)
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
						})
						setTimeout(() => {
							this.page=1
							this.prolist=[]
							this.getProductByStores()
						}, 1000)
						// this.click(status)

					}
				})

			},
			click(n) {
				this.status = n.status
				this.page=1
				this.prolist=[]
				this.getProductByStores()
			},
			clickto(url, id) {
				uni.$u.route(url, id)
			},
			async getProductByStores() {
				let res = await getProductByStore({
					status: this.status
				})
				this.last_page = res.data.data.last_page
				this.prolist = [...this.prolist,...res.data.data.data]
				
				this.prolist.map(t => {
					t.img = this.$BASE_URL + t.images.split(',')[0]
				})
				// this.prolist.img=images[0]
			},
			scrolltolower(){
				this.loadmorestatus = 'loading'
				this.page++
				if (this.page <= this.last_page) {
					this.getProductByStores()
				} else {
					this.loadmorestatus = 'nomore'
				}
			},
			deleteProducts(id) {
				uni.showModal({
					title: '确认删除该商品？',
					success(res) {
						// console.log(res)
						if (res.confirm) { //确认
							deleteProduct({
								id
							}).then(res => {
								if (res.data.code == 1) {
									uni.showToast({
										title: res.data.msg,
										icon: 'none',
									})
									setTimeout(() => {
										this.page=1
										this.prolist=[]
										this.getProductByStores()
									}, 1000)
									// this.click(status)

								}
							})
						}
					}
				})

			}
		},
		mounted() {
			
		},
		onShow() {
			this.page=1
			this.prolist=[]
			this.getProductByStores()
		}
	}
</script>

<style lang="less">
	.con {
		padding: 29rpx 0;
		border-top: 2rpx solid #F4F6F8;

		.scrollview {
			height: calc(100vh - 80rpx - 73rpx - 44px - 58rpx - 6rpx);
			/* #ifdef MP */
			height: calc(100vh - 80rpx - 73rpx - 58rpx - 6rpx);
			/* #endif */
		}

		.scrollviewbox {
			padding: 0 32rpx 26rpx 27rpx;

			.proitem {
				margin-top: 26rpx;
				background: #FFFFFF;
				box-shadow: 0px 1rpx 24rpx 0px rgba(24, 24, 24, 0.08);
				border-radius: 25rpx;
				padding: 32rpx 48rpx 32rpx 30rpx;

				.item_top {
					.pro_pic {
						width: 140rpx;
						height: 140rpx;
						border-radius: 8rpx;
						margin-right: 26rpx;
					}

					.top_right {
						flex-direction: column;
						align-items: flex-start;
						justify-content: space-between;
						height: 140rpx;
						flex: 1;

						.pro_name {
							color: #333333;
							font-size: 32rpx;
							font-weight: bold;
						}

						.pro_kc {
							color: #6A6A6A;
							font-size: 24rpx;
						}

						.por_price {
							align-self: flex-end;
							font-size: 24rpx;
							font-weight: bold;
							color: #FD2A00;
							display: flex;
							align-items: center;
						}
					}
				}

				.caoz {
					justify-content: flex-end;
					margin-top: 52rpx;

					.btn {
						width: 143rpx;
						line-height: 68rpx;
						border: 1rpx solid #CCCCCC;
						border-radius: 34rpx;
						text-align: center;
						color: #0B0B0B;
						font-size: 30rpx;
						margin-left: 22rpx;
					}
				}
			}
		}

	}

	.release {
		width: 147rpx;
		height: 140rpx;
		position: fixed;
		bottom: 85rpx;
		right: 23rpx;
	}
	.pop_box {
		width: 534rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 48rpx 40rpx 54rpx;
		position: relative;
	
		.pop_title {
			margin-bottom:50rpx;
			text-align: center;
			color: #333;
			font-weight: bold;
			font-size: 32rpx;
			position: relative;
			line-height: 34rpx;
	
			.titlebg {
				position: absolute;
				top: 0;
				left: 157rpx;
				width: 218rpx;
				height: 34rpx;
			}
		}
	
		.popitem {
			display: flex;
			align-items: center;
			color: #333333;
			font-size: 28rpx;
			height: 87rpx;
			padding: 0 33rpx;
			background-color: #F7F7F9;
			border-radius: 10rpx;
			margin-bottom: 17rpx;
		}
	
		.popfooter {
			margin-top: 48rpx;
			padding: 0 39rpx;
		}
	
		.popbtn {
			width: 199rpx;
			line-height: 67rpx;
			background: #F7F7F9;
			border-radius: 34rpx;
			text-align: center;
			font-size: 30rpx;
			color: #333;
		}
	
		.popbtn1 {
	
			background: linear-gradient(153deg, #FF8717, #FF5F00);
			color: #fff;
		}
	}
	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
